<template>
  <div>
    <yt-crud
      v-bind="options"
      ref="crudRef"
      @onLoad="getData"
      :fun-props="{
        exportBtn: true,
        delBtn: false,
        customForm: true,
        addBtnText: t('business.ledgerSettleDealer.action.add'),
        addPermi: ['business:ledger_settle_dealer:settle'],
        exportPermi: ['business:ledger_settle_dealer:export'],
      }"
      :table-props="{
        index: false,
        selection: true,
        delBtn: false,
        viewBtn: false,
        editBtn: false,
        menuSlot: true,
        menuWidth: 200,
      }"
      @handle-add="handleSettle"
      @exportFun="handleExport"
      :loading="state.loading"
      :total="state.total"
      v-model:query="state.query"
      @change="onChange"
    >
      <template #rightToolbar></template>
      <template #menuSlot="scope:any">
        <div class="menu-btn" v-has-permi="['business:ledger_settle_dealer:query']">
          <el-tooltip class="box-item" effect="dark" :content="t('business.ledgerSettleDealer.action.view')" placement="top">
            <el-button link type="primary" icon="View" @click="handleView(scope.row)" />
          </el-tooltip>
          <el-divider direction="vertical" />
        </div>
        <template v-if="scope.row.state === 'Settled'">
          <div class="menu-btn" v-has-permi="['business:ledger_settle_dealer:paid']">
            <el-tooltip class="box-item" effect="dark" :content="t('business.ledgerSettleDealer.action.paid')" placement="top">
              <el-button link type="primary" icon="Coin" @click="handlePaid(scope.row)" />
            </el-tooltip>
            <el-divider direction="vertical" />
          </div>
        </template>
      </template>
      <template #startEndTime="scope:any">
        <div>{{scope.row.startTime || '-'}}</div>
        <div>{{scope.row.endTime || '-'}}</div>
      </template>
      <template #type="scope:any">
        <DictTag :options="LedgerTypeEnum" :value="scope.row.type" />
      </template>
      <template #name="scope:any">
        <span v-if="scope.row.type == 'Platform'">-</span>
        <span v-if="scope.row.type == 'Tenant'">{{scope.row.tenantName}}</span>
        <span v-if="scope.row.type == 'Agent'">{{scope.row.agentName}}</span>
        <span v-if="scope.row.type == 'Dealer'">{{scope.row.dealerName}}</span>
      </template>
      <template #settleTime="scope:any">
        {{scope.row.settleTime || '-'}}
      </template>
      <template #paidTime="scope:any">
        {{scope.row.paidTime || '-'}}
      </template>
      <template #state="scope:any">
        <DictTag type="info" :options="LedgerSettleStateEnum" :value="scope.row.state" />
      </template>
    </yt-crud>
    <LedgerSettleDealerSettle ref="ledgerSettleDealerSettleRef" @success="handleSuccess" />
    <LedgerSettleDealerPaid ref="ledgerSettleDealerPaidRef" @success="handleSuccess" />
    <LedgerSettleDealerView ref="ledgerSettleDealerViewRef" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'
import {ledgerSettleDealerList } from '@/api/business/ledgerSettleDealer'
import YtCrud from '@/components/common/yt-crud.vue'
import {ComponentInternalInstance} from 'vue'
import {useI18n} from 'vue-i18n'
import {parseTime} from '@/utils/ruoyi'
import LedgerSettleDealerSettle from '@/views/business/ledgerSettleDealer/modules/settle.vue'
import LedgerSettleDealerPaid from '@/views/business/ledgerSettleDealer/modules/paid.vue'
import LedgerSettleDealerView from '@/views/business/ledgerSettleDealer/modules/view.vue'
import {Api} from '@/api/business/ledgerSettleDealer'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { LedgerSettleStateEnum, LedgerTypeEnum } = toRefs<any>(proxy?.useEnum('ledger_settle_state_enum', 'ledger_type_enum'))
const { t } = useI18n()

const ledgerSettleDealerViewRef = ref()
const ledgerSettleDealerPaidRef = ref()
const ledgerSettleDealerSettleRef = ref()

const state = reactive({
  total: 0,
  loading: false,
  query: {},
})

// 字典
const column = ref<IColumn[]>([
  {
    label: t('business.ledgerSettleDealer.tranId'),
    key: 'tranId',
    type: 'string',
    search: true,
    formHide: false,
    slot: false,
    colSpan: 22,
  },
  {
    label: t('business.ledgerSettleDealer.type'),
    key: 'type',
    align: 'center',
    type: 'select',
    search: true,
    componentProps: {
      options: LedgerTypeEnum,
      style: {
        width: '120px'
      }
    },
    slot: true,
  },
  {
    label: t('business.ledgerSettleDealer.name'),
    key: 'name',
    type: 'string',
    search: true,
    formHide: false,
    searchLabelWidth: 120,
    slot: true,
    align: 'center',
    colSpan: 22,
  },
  {
    label: t('business.ledgerSettleDealer.amount'),
    key: 'amount',
    align: 'center',
    type: 'number',
    search: false,
    formHide: false,
    slot: false,
  },
  {
    label: t('business.ledgerSettleDealer.state'),
    key: 'state',
    align: 'center',
    type: 'select',
    componentProps: {
      options: LedgerSettleStateEnum,
      style: {
        width: '120px'
      }
    },
    sortable: true,
    search: true,
    formHide: false,
    slot: true,
  },
  {
    label: t('crud.table.column.createTime'),
    key: 'createTime',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    formHide: true,
  },
  {
    label: t('business.ledgerSettleDealer.settleTime'),
    key: 'settleTime',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    formHide: true,
    slot: true,
  },
  {
    label: t('business.ledgerSettleDealer.paidTime'),
    key: 'paidTime',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    formHide: true,
    slot: true,
  },
])
const crudRef = ref()
const data = ref<any[]>([])
const getData = () => {
  state.loading = true
  ledgerSettleDealerList({
    ...state.query,
  })
  .then((res: any) => {
    data.value = res.data.rows
    state.total = res.data.total
  })
  .finally(() => {
    state.loading = false
  })
}

const handleView = (row: any) => {
  ledgerSettleDealerViewRef.value.openDialog(row)
}

const handleSettle = () => {
  ledgerSettleDealerSettleRef.value.openDialog()
}

const handlePaid = (row: any) => {
  ledgerSettleDealerPaidRef.value.openDialog(row)
}

// 导出
const handleExport = () => {
  proxy?.download(Api.export, state.query, `profit_settled_${new Date().getTime()}.xlsx`)
}


const handleSuccess = () => {
  getData()
}

const multipleSelection = ref<{ deviceId: string }[]>([])

const onChange = (data) => {
  multipleSelection.value = data
}

const options = reactive({
  ref: 'crudRef',
  data,
  column,
})
</script>

<style lang="scss" scoped></style>
